<template>
	<div class="market">
		<!-- <image class="back-btn" src="/static/headerIcon/leftIcon.png" mode="" @tap="handleBack"></image> -->
		<div class='container'>
			<headerCom @target="handleTarget" />
			<div class="classify">
				<div class="classify-item " :class="{activeClassify:item.id == paramer.belongSessions}"
					v-for="item in classifyArr" :key="item.categoryName" @click="handleSelectClassify(item)">
					<div class="classify-item-name">{{item.categoryName}}</div>
				</div>
				
				<!-- <div class="classify-item activeClassify">
					<div class="classify-item-name">易货区</div>
				</div> -->
			</div>
			<scroll-list ref="list" :option="{
				page: paramer.pageNum, // 分页
				size: 20, // 分页大小
				auto:false}" @load="e=>load(e,1)" @refresh="e=>load(e,2)">
				<div class='marketList'>
					<marketGoodsItem :data="item" v-for="item in goodsData" :key="item.id" />
				</div>
			</scroll-list>
		</div>
		
		<subTabbar />
	</div>
</template>

<script>
	import {
		getGoodsTypeList,
		saleGoodsPage,
		nearestTime
	} from "../../api/api.js"
	import headerCom from "../../components/basicComponent/market/headerCom.vue"
	import subTabbar from "../../components/basicComponent/subTabbar.vue"
	import marketGoodsItem from "../../components/basicComponent/marketGoodsItem.vue"
	import scrollList from "../../components/scroll-list/scroll-list.vue"
	import SearchBox from "../../components/basicComponent/searchBox/searchBox.vue"
	export default {
		name: 'market',
		onLoad() {

		},
		data() {
			return {
				classifyArr: [],
				paramer: {
					categoryId: '', // 分类id
					queryKey: '',
					pageNum: 1,
					pageSize: 20,
					secondCategoryId: '', //二级分类id
					belongSessions: '1', //场次
				},
				goodsData: [],
				query: {
					size: 20
				}
			}
		},
		components: {
			SearchBox,
			scrollList,
			marketGoodsItem,
			headerCom,
			subTabbar
		},
		onShow() {
			uni.hideTabBar()
			// this.handleGetGoodsTypeList()

		},

		mounted() {
			this.handleGetGoodsTypeList()
		},
		onUnload() {

		},
		methods: {
			handleTarget(value) {
				this.paramer.queryKey = value
				this.paramer.pageNum = 1
				this.goodsData = []
				this.load('', 1)
			},
			handleSelectClassify(item) {
				// this.paramer.categoryId = item.id
				this.paramer.belongSessions = item.id
				this.paramer.pageNum = 1
				this.goodsData = []
				this.load('', 1)
			},
			handleGetGoodsTypeList() {
			
				// getGoodsTypeList().then(res => {
				// 	console.log('getGoodsTypeList', res)
				// 	if (res.code == 200) {
				// 		this.classifyArr = res.data
				// 		this.paramer.categoryId = res.data[0].id
				// 		this.load('', 1)
				// 	}
				// })
				
				nearestTime().then(res => {
					this.classifyArr = res.data.list.map(item => {
						return {
							...item,
							categoryName: item.name.split('场')[0] + '场'
						};
					});
					this.paramer.belongSessions = res.data.list[0].id
					this.load('', 1)
				})
			},
			load(paging, index) {
				// if (!this.paramer.categoryId) return
				if (!this.paramer.belongSessions) return
				if (index == 2) {
					this.goodsData= []
					this.paramer.pageNum = 1
				}
			
				saleGoodsPage(this.paramer).then(res => {
					console.log('saleGoodsPage', res)
					if (res.code == 200) {
						this.paramer.pageNum++;
						this.goodsData = [...this.goodsData, ...res.data.records]
						if (index == 1) {
							// 加载
							this.$refs.list.loadSuccess({
								list: this.goodsData,
								total: res.data.total
							});
						} else {
							// 刷新
							// this.goodsData = res.data.records
							this.$refs.list.refreshSuccess({
								list: this.goodsData,
								total: res.data.total
							});
						}
					}else{
						this.goodsData = []
					}

				})
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.market {
		position: relative;
		padding: 180rpx 28rpx 0 28rpx;
		box-sizing: border-box;

	}
	
	.back-btn {
		position: fixed;
		left: 20rpx;
		top: 70rpx;
		z-index: 3;
		width: 44rpx;
		height: 44rpx;
	}

	.container {
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}

	.classify {
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		display: flex;
		justify-content: center;
		margin: 0 -28rpx;
		// margin-bottom: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient( 180deg, #FF9C9C 0%, rgba(255,156,156,0) 100%);
		box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.02);
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.activeClassify {
			position: relative;
			
			.classify-item-name {
				font-weight: 600 !important;
				}
			&:after{
				position: absolute;
				bottom: 25rpx;
				left: 50%;
				right: 50%;
				transform: translateX(-50%);
				content: '';
				width: 64rpx;
				height: 24rpx;
				background: url("@/static/shopStore/activeIcon1.png") no-repeat;
				background-size:100% 100%;
				display: block;
			}
		}

		.classify-item {
			flex: 0 0 auto;
			width: 152rpx;
			display: inline-block;
			box-sizing: border-box;
			margin-top: -20rpx;


			.classify-item-image {
				text-align: center;
			}

			.classify-item-name {
				font-weight: 400;
				font-size: 28rpx;
				color: #1F1F1F;
				margin-top: 12rpx;
				text-align: center;
				padding-bottom:20rpx;
			}
		}

		::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
	}

	.marketList {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-gap: 20rpx;
		margin: 5rpx 0 0 5rpx;
	}
</style>